<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="stripes"
	uri="http://stripes.sourceforge.net/stripes.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<stripes:useActionBean beanclass="simple.web.UsersActionBean" var="bean" />
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Stripes Users</title>
<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
    <link rel="stylesheet" media="all" href="css/less_4_lh_1.4.css" />
    <link rel="stylesheet" media="all" href="css/base.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->

    <!-- JQuery, JQuery UI theme and style -->
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="scripts/jquery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery/jquery-ui-1.8.14.custom.min.js"></script>

    <script type="text/javascript" src="scripts/dataTables/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            oTable = $('#userTable').dataTable({
                "bPaginate": false,
                "bLengthChange": false,
                "oLanguage": { "sSearch": "Filter records:" },
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"
            });
            $('#userTable').css("width", "100%");
        });
    </script>
</head>

<body lang="en">
	<p>Stripes Users</p>
	<table id="userTable">
	    <thead>
	        <th>First Name</th>
	        <th>Last Name</th>
	        <th>Birthday</th>
	    </thead>
	    <tbody>
		<c:forEach items="${ bean.users }" var="user">
			<tr>
				<td><c:out value="${user.firstName}" /></td>
				<td><c:out value="${user.lastName}" /></td>
				<td><fmt:formatDate dateStyle="short" value="${user.birthday}" /></td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
</body>

</html>